<script setup lang="ts">
import { type FractionTerm } from '~/types/equation'

const props = defineProps({
  data: { // 数据，包含分子与分母
    type: Object as () => FractionTerm[],
    required: true,
    default: []
  }
})

// 是否显示 分母 与 分数线
const showDenominator = (fractionItem: FractionTerm) => {
  let flag = true
  if (!fractionItem.bottom || fractionItem.bottom.length === 0 || (fractionItem.bottom.length === 1 && fractionItem.bottom[0].text === '1')) {
    flag = false
  }
  return flag
}

</script>

<template>
  <div v-for="(fractionItem, xIndex) in props.data" :key="xIndex" class="fractionItem">
    {{ getSymbol(fractionItem.type) }}
    <div class="fractionItem-container">
      <div class="fractionItem-row">
        <div v-for="(item, yIndex) in fractionItem.top" :key="yIndex">
          <div v-if="item.text !== undefined" class="flex flex-row" :style="{ paddingLeft: item.top !== '1' && item.top !== undefined || item.bottom !== undefined ? '5px' : '3px', paddingRight: item.top !== '1' && item.top !== undefined || item.bottom !== undefined ? '0px' : '3px' }">
            <div>{{ getSymbol(item.type) }}</div>
            <div class="flex flex-row">
              <div>
                {{ item.text }}
              </div>
              <div class="fractionItem-rightPart">
                <div class="fractionItem-rightPart-top"><sup v-if="item.top !== '1'">{{ item.top }}</sup></div>
                <div class="fractionItem-rightPart-bottom"><sub v-if="item.bottom !== undefined">{{ item.bottom }}</sub></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="showDenominator(fractionItem)" class="fractionItem-line" />
      <div v-if="showDenominator(fractionItem)" class="fractionItem-row">
        <div v-for="(item, yIndex) in fractionItem.bottom" :key="yIndex">
          <div v-if="item.text !== undefined" class="flex flex-row">
            <div>{{ getSymbol(item.type) }}</div>
            <div class="flex flex-row">
              <div>
                {{ item.text }}
              </div>
              <div class="fractionItem-rightPart">
                <div class="fractionItem-rightPart-top"><sup v-if="item.top !== '1'">{{ item.top }}</sup></div>
                <div class="fractionItem-rightPart-bottom"><sub v-if="item.bottom !== undefined">{{ item.bottom }}</sub></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.fractionItem {
  display: flex;
  flex-direction: row;
  align-items: center
}
.fractionItem-container {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}
// 分子、分母行
.fractionItem-row {
  display: flex;
  flex-direction: row;
  line-height: initial;
  justify-content: center;
}
// 分数线
.fractionItem-line {
  height: 0.08em;
  background-color: #1D2129;
}
.fractionItem-rightPart {
  @apply flex flex-col;
  line-height: initial;
}
// 次方上标
.fractionItem-rightPart-top {
  padding-top: 0.5em;
  height: 50%;
  display: flex; /* Flex 容器 */
  align-items: flex-end; /* 子元素垂直对齐到底部 */
  font-size: 0.6em;
}
// 坐标下标
.fractionItem-rightPart-bottom {
  padding-top: 0.5em;
  height: 50%;
  display: flex; /* Flex 容器 */
  align-items: flex-start; /* 子元素垂直对齐到底部 */
  font-size: 0.5em;
}
</style>